<template>
    <!-- 默认展开 -->
    <el-sub-menu index="4">
        <template #title>事件管理</template>
        <el-menu-item index="4-1" @click="addEvent">添加事件</el-menu-item>
        <el-menu-item index="4-2" @click="searchEvent()">
            查询事件</el-menu-item
        >
        <el-menu-item index="4-3" @click="handleUpdateEvent"
            >开启事件更新</el-menu-item
        >
        <el-menu-item index="4-4" @click="closeUpdateEvent"
            >关闭更新事件</el-menu-item
        >
    </el-sub-menu>
    <!-- 添加事件弹窗 -->
    <AddEvent ref="addEventInstance" />
    <!-- 子组件搜索事件(里面的画笔结束触发对话框子组件),需要放在菜单同级 -->
    <SearchEvent ref="searchEventInstance" />
    <!-- 更新事件弹窗 -->
    <UpdateEventPopup
        ref="updateEventPopupInstance"
        @updateSuccess="updateSuccess"
    />
</template>

<script setup>
import AddEvent from "./AddEventDialog.vue";
import UpdateEventPopup from "./UpdateEventPopup.vue";
/* vue */
import { ref, getCurrentInstance, onMounted } from "vue";
import icon from "@/assets/images/position-fill.png"; // 事件标记图标
/* 事件查询 */
import SearchEvent from "./SearchEvent.vue";
import { Query } from "@/api/mapgis-api/Query";

const { proxy } = getCurrentInstance(); // 获取当前实例,用于获取地图实例
const addEventInstance = ref(null); //  添加事件对话框组件的实例
const searchEventInstance = ref(null); // 搜索事件对话框组件的实例
const updateEventPopupInstance = ref(null); // 更新事件弹窗组件的实例

//添加事件
const addEvent = () => {
    addEventInstance.value.addEvent();
};

//搜索事件
const searchEvent = () => {
    searchEventInstance.value.activeDraw();
};
/* 标记数据源 */
const signSource = new ol.source.Vector({
    features: [],
});
/* 标记图层 */
const signLayer = new ol.layer.Vector({
    source: signSource,
    title: "事件标记",
});

onMounted(() => {
    const map = proxy.$map;
    map.addLayer(signLayer);
    console.log(addEventInstance.value)
});

//mapgis服务信息
const service = {
    docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId: 2,
};
/* 设置标记样式 */
function setMarkerStyle(url) {
    return new ol.style.Style({
        /**{olx.style.IconOptions}类型*/
        image: new ol.style.Icon({
            anchor: [0.5, 200],
            anchorOrigin: "bottom-center",
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            offsetOrigin: "top-right",
            // offset:[0,10],
            //图标缩放比例
            scale: 0.15,
            //透明度
            opacity: 1,
            //图标的url
            src: url,
        }),
    });
}
/* 更新事件状态 */
const handleUpdateEvent = () => {
    const map = proxy.$map;
    signSource.clear();
    Query.queryByLayerId(service).then((res0) => {
        const features = res0;
        features.forEach((feature) => {
            feature.setStyle(setMarkerStyle(icon));
        });
        signSource.addFeatures(features);
    });
    // 监听点击事件;singleclick :
    map.on("singleclick", function (event) {
        map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
            if (layer === signLayer) {
                const res = feature.values_.values_;
                const coordinate = feature.values_.geometry.flatCoordinates;
                delete res.mpLayer;
                // console.log("点击事件", res);
                // 弹出事件弹窗
                updateEventPopupInstance.value.setPopup({
                    position: coordinate,
                    data: res,
                    ids: [feature.id_],
                });
            }
        });
    });
};
// 更新事件成功
const updateSuccess = ({ id, status }) => {
    //更新图层要素属性
    const feature = signSource.getFeatureById(id);
    feature.values_.values_.处理状态 = status;
};

/* 关闭更新事件状态 */
const closeUpdateEvent = () => {
    // 隐藏事件标记图层
    signSource.clear();
    // 关闭事件弹窗
    updateEventPopupInstance.value.setPopup({ position: undefined });
};
</script>

<style scoped></style>
